import React, { FC, useEffect } from 'react'
import {inject,observer}from 'mobx-react'
import MyAvatar from '../../../../components/MyAvatar'
import { Avatar, Tag } from 'antd'
import { baseURL } from '../../../../api/request'
import './index.scss'
import { vipList } from '../../../../utils'
import {
  DingtalkOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
const UserList:FC<any>=({
    user,
    uinfo
})=> {
    const {getUserList,userList_filter,changeuser,filterUserList,userList}=user
    const {userInfo,changeInfoAsync}=uinfo
    useEffect(()=>{
      //获取过滤自己用户数据
      getUserList()
    },[])
       //点击查看，携带——id进入详情页
  const navigate = useNavigate()
  const gotoDetailed=(item:any)=>{
    navigate('/detailed/userDetailed/'+item._id)
  }
  return (
    <div style={{marginTop:"0.05rem"}}>
        {
          userList&&userList.map((item: any,index: any)=>(
            <div className='userList' key={index} style={{padding:"0 0.1rem",marginBottom:"0.05rem",background:"#fff",width:"100%",height:"0.5rem"}}
            onClick={()=>gotoDetailed(item)}
            >
             <div className='touxiang' style={{height:"100%",width:"0.5rem",display:"flex",alignItems:"center"}}>
             {
                item.avatar?<Avatar style={{width:"0.4rem",height:"0.4rem"}} src={item.avatar.replace(/public/,baseURL)} />:<Avatar src={require('../../../../assets/images/xiaoxin_2.jpg')}></Avatar>
             }
             </div>
              <div 
              style={{width:"100%",height:"100%"}}
              >
              <p style={{margin:0,padding:"0.05rem 0.2rem 0 0",display:"flex",justifyContent:"space-between"}}>{item.username} <Tag icon={<DingtalkOutlined />} color={vipList.find(v=>v.value==item.role)?.color}>
                {vipList.find(v=>v.value==item.role)?.label}
              </Tag></p>
              <p style={{margin:0}}>
                {item.phone}
              </p>
              
              </div>
            </div>
          ))
        }
    </div>
  )
}
export default inject('user','uinfo')(observer(UserList))
